<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="mootools_1.11_packed.js"></script>
<script type="text/javascript" src="../dks_compact_accessible_forms.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Compact and Accessible Forms</title>
</head>
<body>
	<form id="compactform" action="index.html">  	
  	<fieldset>
    	<legend>Example 1: Login</legend>
      <p>This example demonstrates basic usage (default options): </p>           
      <code>new DKS.CompactAccessibleForms('compactform');</code> 
    	<ol>
      	<li><label for="username" class="compactTarget">Username</label> <input id="username" name="username" type="text" /></li>
        <li><label for="password" class="compactTarget">Password</label> <input id="password" name="password" type="password" /></li>
        <li><input type="button" value="Login" /></li>
      </ol>      
    </fieldset>    
  </form>
  
  <script type="text/javascript">
		new DKS.CompactAccessibleForms('compactform');		
  </script>
  
  <form id="compactformICU" action="index.html">  	
  	<fieldset>
    	<legend>Example 2: Login with input field class update</legend>
      <p>This example enables input field class update (updateInputFieldClass option): </p>
      <code>new DKS.CompactAccessibleForms($('compactformICU'), {updateInputClass:true});</code>
    	<ol>
      	<li><label for="usernameICU" class="compactTarget">Username</label> <input id="usernameICU" name="usernameICU" type="text" /></li>
        <li><label for="passwordICU" class="compactTarget">Password</label> <input id="passwordICU" name="passwordICU" type="password" /></li>
        <li><input type="button" value="Login" /></li>
      </ol>      
    </fieldset>    
  </form>
  
  <script type="text/javascript">
		new DKS.CompactAccessibleForms($('compactformICU'), {updateInputClass:true});	
  </script>
  
  <form id="compactformICUC" action="index.html">  	
  	<fieldset>
    	<legend>Example 3: Login with input field class update (custom) </legend>
      <p>This example enables input field class update but using custom class names for input fields (updateInputClass, visibleInputClassName and hiddenInputClassName options: </p>
      <code>new DKS.CompactAccessibleForms('compactformICUC', {updateInputClass:true, visibleInputClassName:"compactVisibleCustom", hiddenInputClassName:"compactHiddenCustom"});</code>
    	<ol>
      	<li><label for="usernameICUC" class="compactTarget">Username</label> <input id="usernameICUC" name="usernameICUC" type="text" /></li>
        <li><label for="passwordICUC" class="compactTarget">Password</label> <input id="passwordICUC" name="passwordICUC" type="password" /></li>
        <li><input type="button" value="Login" /></li>
      </ol>      
    </fieldset>    
  </form>
  
  <script type="text/javascript">
		new DKS.CompactAccessibleForms('compactformICUC', {updateInputClass:true, visibleInputClassName:"compactVisibleCustom", hiddenInputClassName:"compactHiddenCustom"});	
  </script>
  
  <form id="compactmultiformsa" class="cforms" action="index.html">	  
  	<fieldset>
	    <legend>Example 4.a: Multiple forms with a single call</legend>
      <p>This example shows how you can process multiple forms with a single line of code by sending an array of container elements (most probably forms or fieldset elements):</p>
      <code>new DKS.CompactAccessibleForms($$('.cforms'));</code>
    	<ol>
      	<li><label for="mfaField1" class="compactTarget">Form A - Field 1</label> <input id="mfaField1" name="mfaField1" type="text"/></li>
        <li><label for="mfaField2" class="compactTarget">Form A - Field 2</label> <input id="mfaField2" name="mfaField2" type="text" /></li>
        <li><input type="button" value="Submit" /></li>
      </ol>      
    </fieldset>
  </form>
  <form id="compactmultiformsb" class="cforms" action="index.html">	  
  	<fieldset>
	    <legend>Example 4.b: Multiple forms with a single call (second form)</legend>      
      <p>This form is initialized with the same call made to initialize the form in Example 4.a.</p>
    	<ol>
      	<li><label for="mfbField1" class="compactTarget">Form B - Field 1</label> <input id="mfbField1" name="mfbField1" type="text"/></li>
        <li><label for="mfbField2" class="compactTarget">Form B - Field 2</label> <input id="mfbField2" name="mfbField2" type="text" /></li>
        <li><input type="button" value="Submit" /></li>
      </ol>          
    </fieldset>
  </form>
  
  <script type="text/javascript">
		new DKS.CompactAccessibleForms($$('.cforms'));	
  </script>
	
  <form id="compactSPH" class="cforms" action="index.html">	  
  	<fieldset>
	    <legend>Example 5: Safari "placeholder" attribute</legend>            
      <p>This example uses the Safari proprietary "placeholder" input field attribute instead of binding custom events. This example will behave the same way as others unless viewed under Safari.</p>
      <code>new DKS.CompactAccessibleForms('compactSPH', {usePlaceholderAttr:true});</code>
    	<ol>
      	<li><label for="sphfField1" class="compactTarget">Field 1</label> <input id="sphfField1" name="sphfField1" type="text"/></li>
        <li><label for="sphfField2" class="compactTarget">Field 2</label> <input id="sphfField2" name="sphfField2" type="text" /></li>
        <li><input type="button" value="Submit" /></li>
      </ol>          
    </fieldset>
  </form>
  
  <script type="text/javascript">
		new DKS.CompactAccessibleForms('compactSPH', {usePlaceholderAttr:true});	
  </script>
  
  <form id="compactpopulatedform" action="index.html">	  
  	<fieldset>
	    <legend>Example 6: Pre populated field and untargeted field</legend>
      <p>This example shows how the plug-in handles pre populated fields as well as the ability not to target a field (not compacted).</p>
    	<ol>
      	<li><label for="populatedfield" class="compactTarget">Populated field</label> <input id="populatedfield" name="populatedfield" type="text" value="Erase this data..." /></li>
        <li><label for="untargetedfield" >Untargeted field</label> <input id="untargetedfield" name="untargetedfield" type="text" /></li>
        <li><input type="button" value="Submit" /></li>
      </ol>      
    </fieldset>
  </form>
  
  <script type="text/javascript">
		new DKS.CompactAccessibleForms('compactpopulatedform');	
  </script>
</body>
</html>
